<template>
    <div>
        <div class="steps">
            <div class="status" v-if="shop.orderStatus == 1 || shop.orderStatus == 2">
                <img src="./../../assets/payWait.png" alt="">
                <div class="info">
                    <p>等待付款</p>
                    <p  class="btn" @click="goPay">去付款</p>
                </div>
            </div>
            <div class="status"  v-if="shop.orderStatus == 3">
                <img src="./../../assets/sendWait.png" alt="">
                <div class="info">
                    <p>等待发货</p>
                </div>
            </div>
          
            <div class="status" v-if="shop.orderStatus == 4">
                <img src="./../../assets/sendWait.png" alt="">
                <div class="info">
                    <p>等待收货</p>
                    <p class="btn" @click="confirmReceiveGoods()">确认收货</p>
                </div>
            </div>
            <div class="status" v-if="shop.orderStatus == 10">
                <van-icon name="checked" size="50px" color="#d81e06"></van-icon>
                <div class="info">
                    <p>订单完成</p>
                    <p class="btn" v-if=" shop.orderStatus == 4"></p>
                </div>
            </div>
            <div class="status" v-if="shop.orderStatus == -2">
                <van-icon name="clear" size="50px" color="#d81e06"></van-icon>
                <div class="info">
                    <p>订单已取消</p>
                </div>
            </div>
            <van-steps v-if="shop.orderStatus && shop.orderStatus != 1 && shop.orderStatus != 2 && shop.orderStatus != -2" :active="active" >
                <van-step>买家下单</van-step>
                <van-step>商家发货</van-step>
                <van-step>买家收货</van-step>
            </van-steps>
        </div>
        <div class="location" v-if="addressInfo">
            <div class="addressInfo">
                <p class="name">姓名:&nbsp;{{addressInfo.deliName}}</p>
                <p class="name">联系方式:&nbsp;{{addressInfo.deliTel}}</p>
                <div class="address">地址:&nbsp;{{addressInfo.deliAddress}}</div>
            </div>
        </div>


        <van-panel title="商品列表"  style="margin-top: 15px;">
            <van-card
                v-for="goods in goodsList"
                @click="$router.push('/goods/detail/' + goods.goodsId)"
                :key="goods.goodsId"
                :num="goods.productNum"
                :price="goods.totalPrice | money"
                :desc="goods.goodsSpecName"  
                :title="goods.title"
                :thumb="`/images/${goods.titleImage}`"
            >
                <div slot="footer" v-if="goods.refundState == 0 && shop.payStatus == 2">
                    <van-button size="mini" plain hairline type="danger" @click.stop="$router.push({path: '/order/refund/' + goods.goodsId, query: {
                        num: goods.productNum,
                        desc: goods.goodsSpecName,
                        name: goods.title,
                        img: goods.titleImage,
                        price: goods.totalPrice,
                        phone: shop.deliTel,
                        id: goods.orderItemId
                    }})">退款</van-button>
                </div>
            </van-card>
            <div class="tips  vux-1px-t">
                运费:&nbsp;<span>¥<em>{{shop.freightAmount | money}}</em></span>
                商品总计:&nbsp;<span>¥<em>{{shop.productAmount | money}}</em></span>
            </div>
        </van-panel>

        <van-cell-group style="margin-top: 15px;">
            <van-cell title="订单号" :value="shop.orderSn"> </van-cell>
            <van-cell title="创建时间" :value="shop.createTime"> </van-cell>
            <van-cell title="支付时间" :value="shop.payTime"> </van-cell>
        </van-cell-group>

    </div>
</template>

<script>
export default {
    name: 'orderDetail',
    data() {
        return {
            showPop: false,
            addressInfo: {},
            goodsList: [],
            shop: {},
            
            active: 0,
        }
    },
    methods: {
        getDetail() {
            this.$http.post('/shop/order/front/getUserOrderDetail', {
                orderId: this.$route.params.id
            }).then(res => {
                if (res.status === 0) {
                    console.log('--获取订单信息成功--')
                    console.log(res)
                    this.addressInfo = res.data.shopOrderDelivery;
                    this.goodsList = res.data.shopOrderItemsList;
                    this.shop = res.data.shopOrderVo;
                    if (this.shop.orderStatus == 3) {
                        this.active = 0;
                    } else if (this.shop.orderStatus == 4) {
                        this.active = 1;
                    } else if (this.shop.orderStatus == 10) {
                        this.active = 2;
                    }
                }
            })
        },
        confirmReceiveGoods() {
            this.$dialog.confirm({
                message: '是否确认收货？'
            }).then(() => {
                this.$http.post('/shop//order/front/confirmReceiveGoods', {
                    orderId: this.$route.params.id
                }).then(res => {
                    if (res.status === 0) {
                        this.$toast.success('确认成功');
                        this.getDetail();
                    } else {
                        this.$toast.fail(res.message);
                    }
                })
            }).catch(() => {})
        },
        goPay() {
            this.$router.push({path: '/order/payOrder', query: {order: `|${this.shop.orderSn}|`}})
        }
    },

    mounted() {
        this.getDetail();
    }
}
</script>


<style scoped lang="scss">

.location {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 15px;
    line-height: 21px;
    padding-bottom: 16px;
    background: #fff url() -7px bottom repeat-x;
    background-size: 64px 5px;
    .addressInfo {
        flex: 1;
        .name {
            word-wrap: break-word;
            word-break: break-all;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .address {
            word-wrap: break-word;
            word-break: break-all;
            span {
                display: inline-block;
                position: relative;
                overflow: hidden;
                padding: 0 5px;
                vertical-align: middle;
                margin: -2px 5px 0 0;
                max-width: 8em;
                height: 15px;
                line-height: 15px;
                font-size: 10px;
                color: #e93b3d;
                &::after {
                    content: "";
                    position: absolute;
                    z-index: 1;
                    pointer-events: none;
                    background-color: #e93b3d;
                    border: 1px solid #ddd;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: none;
                    border-color: #e93b3d;
                    border-radius: 2px;
                    right: -100%;
                    bottom: -100%;
                    -webkit-transform: scale(.5);
                    -webkit-transform-origin: 0 0;
                    border-radius: 4px;
                }
            }
        }
    }
}

.tips {
    font-size: 12px;
    line-height: 40px;
    text-align: right;
    padding: 0 5px;
    border-color: #ccc;
    span {
        color: #f44;
        margin-right: 5px;
    }
}

.steps {
    padding: 10px 15px;
    background-color: #fff;
    margin-bottom: 5px;
}

.status {
    display: flex;
    align-items: center;
    padding: 15px;
    img {
        height: 60px;
    }

    .info {
        font-size: 16px;
        margin-left: 5px;
        .btn {
            color: #d81a26;
            padding: 3px 5px;
            font-size: 12px;
            border: 1px solid #d81a26;
            border-radius: 3px;
            text-align: center;
            margin-top: 3px;
        }
    }
}
</style>
